"use client";

import DateView from "@/etc/DateView";
import FavoritesView from "@/etc/FavoritesView";
import ModeItem from "@/etc/ModeItem";
import TotalEdgesView from "@/etc/TotalEdgesView";
import TotalNoteFilesView from "@/etc/TotalNoteFilesView";
import TotalTitlesView from "@/etc/TotalTitlesView";
import useGetEtc from "@/etc/useGetEtc";
import {
  is,
  m0s,
  m12s,
  m1s,
  m2s,
  m3s,
  m4s,
  m5s,
  m6s,
  m7s,
  m8s,
} from "@/Utility";
import { useTranslations } from "next-intl";
import { Col, Row } from "reactstrap";

export default function Page() {
  const t = useTranslations();

  const {
    data: {
      totalDateSet,
      totalDateValues,
      signUpDateSet,
      signUpDateValues,
      avatarDateSet,
      avatarDateValues,
      totalNoteFiles,
      totalTitles,
      totalEdges,
      favorites,
      favoritesAt,
      inputModes,
      autoModes,
      noteSaltModes,
      faintNoteModes,
      judgmentModes,
      hitPointsModes,
      noteMobilityModes,
      longNoteModes,
      inputFavorModes,
      noteModifyModes,
      lowestJudgmentConditionModes,
    },
    isFetched: isEtcLoaded,
  } = useGetEtc();

  return (
    <>
      <Row className="g-0">
        <Col className="m-1" xs="auto">
          <DateView
            title={t("etcTotal")}
            dateSet={totalDateSet}
            dateValues={totalDateValues}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <DateView
            title={t("etcSignUp")}
            dateSet={signUpDateSet}
            dateValues={signUpDateValues}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <DateView
            title={t("etcAvatar")}
            dateSet={avatarDateSet}
            dateValues={avatarDateValues}
          />
        </Col>
      </Row>
      <Row className="g-0">
        <Col className="m-1" xs="auto">
          <TotalNoteFilesView totalNoteFiles={totalNoteFiles} />
        </Col>
        <Col className="m-1" xs="auto">
          <TotalTitlesView totalTitles={totalTitles} />
        </Col>
        <Col className="m-1" xs="auto">
          <TotalEdgesView totalEdges={totalEdges} />
        </Col>
      </Row>
      <Row className="g-0">
        <Col className="m-1" xs="auto">
          <FavoritesView title={t("etcFavorites")} favorites={favorites} />
        </Col>
        <Col className="m-1" xs="auto">
          <FavoritesView title={t("etcFavoritesAt")} favorites={favoritesAt} />
        </Col>
      </Row>
      <Row className="g-0">
        <Col className="m-1" xs="auto">
          <ModeItem
            title={t("etcInputMode")}
            modes={inputModes}
            drawings={is}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <ModeItem title={t("etcAutoMode")} modes={autoModes} drawings={m0s} />
        </Col>
        <Col className="m-1" xs="auto">
          <ModeItem
            title={t("etcNoteSaltMode")}
            modes={noteSaltModes}
            drawings={m1s}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <ModeItem
            title={t("etcFaintNoteMode")}
            modes={faintNoteModes}
            drawings={m2s}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <ModeItem
            title={t("etcJudgmentMode")}
            modes={judgmentModes}
            drawings={m3s}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <ModeItem
            title={t("etcHitPointsMode")}
            modes={hitPointsModes}
            drawings={m4s}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <ModeItem
            title={t("etcNoteMobilityMode")}
            modes={noteMobilityModes}
            drawings={m5s}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <ModeItem
            title={t("etcLongNoteMode")}
            modes={longNoteModes}
            drawings={m6s}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <ModeItem
            title={t("etcInputFavorMode")}
            modes={inputFavorModes}
            drawings={m7s}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <ModeItem
            title={t("etcNoteModifyMode")}
            modes={noteModifyModes}
            drawings={m8s}
          />
        </Col>
        <Col className="m-1" xs="auto">
          <ModeItem
            title={t("etcLowestJudgmentConditionMode")}
            modes={lowestJudgmentConditionModes}
            drawings={m12s}
          />
        </Col>
      </Row>
    </>
  );
}